import {connect} from "dva";
import BaseComponent from "components/Base/BaseComponent";
import "./index.less";

import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";
import SearchBar from "components/Base/SearchBar/SearchBar";
import SearchColumns from "./searchColumns";
import React from "react";


@connect(({dataDetail}) => ({dataDetail}))
export default class extends BaseComponent {

  getNamespace() {
    return "dataDetail";
  }

  componentDidMount() {
    this.dispatch({
      type: `${this.getNamespace()}/getStatistics`,
      payload: {
        notice: this.showMsg
      },
    })
  }

  render() {

    const {uploadStatistics} = this.props.dataDetail;

    const cols = {
      value: {
        min: 0
      },
      year: {
        range: [0, 1],
        tickCount:10,
      }
    };

    return (
      <div className="chart">

        <div className="search">
          <SearchBar columns={SearchColumns} />
        </div>

        <Chart height={300} data={uploadStatistics} scale={cols} forceFit>
          <Axis name="year" />
          <Axis name="value" />
          <Tooltip
            crosshairs={{
              type: "y"
            }}
          />
          <Geom type="line" position="year*value" size={2} />
          <Geom
            type="point"
            position="year*value"
            size={4}
            shape={"circle"}
            style={{
              stroke: "#fff",
              lineWidth: 1
            }}
          />
        </Chart>
      </div>
    );
  }
}
